<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            width: 200px;
            height: 100px;
            background-color: red;
            text-align: center;
            --s: 20%;
            clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%);
        }

        .demo2 {
            width: 200px;
            height: 100px;
            background-color: pink;
            --s: 20%;
            clip-path: polygon(0 0,
                    calc(100% - var(--s)) 0,
                    100% 50%,
                    calc(100% - var(--s)) 100%,
                    0 100%,
                    var(--s) 50%);
                margin-top: 50px;
                text-align: center;
        }

        .demo3{
            width: 400px;
            height: 400px;
            text-align: center;
            background-color:blue;
            clip-path: polygon(
        /* 第一组 */
        100%      50%,
        74.15%    56.47%,
        93.3%     75%,
        67.68%    67.68%,
        75%       93.3%,
        56.47%    74.15%,
        
        /* 第二组 */
        50%       100%,
        43.53%    74.15%,
        25%       93.3%,
        32.32%    67.68%,
        6.7%      75%,
        25.85%    56.47%,
        
        /* 第三组 */
        0%        50%,
        25.85%    43.53%,
        6.7%      25%,
        32.32%    32.32%,
        25%       6.7%,
        43.53%    25.85%,
        
        /* 第四组 */
        50%       0%,
        56.47%    25.85%,
        75%       6.7%,
        67.68%    32.32%,
        93.3%     25%,
        74.15%    43.53%
    );
        }
        
    </style>
</head>

<body>
    <div class="demo1">梯形</div>

    <div class="demo2">多变形</div>

    <div class="demo3">星爆图</div>
</body>

</html>